<template>
  <div>
    <a-spin :spinning="uploadSpinning" tip="数据保存中...">
      <a-alert
        type="error"
        :message="'有' + this.dataJson.errorList.length + '条数据异常，请尽快处理'"
        show-icon
        closable
        :after-close="handleClose"
        close-text="导出错误数据"
        style="margin: 24px;background-color: #fff1f0;"
      />
      <div class="xq-form-wrapper pbox">
        <a-table
          :columns="columnsw"
          :data-source="this.dataJson.errorList"
          :row-key="d => d['姓名']"
          :scroll="{ x: 800 }"
          :pagination="pagination"
          class="xq-draggable-table"
        >
        </a-table>
      </div>
      <div class="preview-btn">
        <a-button type="primary" style="margin-right:12px;" @click="$emit('onAction', 0)">返回</a-button>
        <a-button type="primary" @click="onSubmit">
          下一步
        </a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import axios from "axios";
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  mixins: [curdMixin],
  props: {
    dataJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      uploadSpinning: false,
      alertiVisible: false,
      spinning: false,
      total: 0,
      pageNo: 1,
      pageSize: 20,
      errorDataCount: 0,
      columnsw: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true
      }
    };
  },
  created() {
    this.onGetCrmCustomerImportDetails();
  },
  methods: {
    async onGetCrmCustomerImportDetails() {
      if (this.dataJson.errorList && this.dataJson.errorList.length !== 0) {
        for (var i = 0; i < this.dataJson.head.length; i++) {
          var item = {
            title: this.dataJson.head[i],
            dataIndex: this.dataJson.head[i],
            ellipsis: true,
            width: 150
          };
          if (this.dataJson.head[i] === "姓名") {
            item.fixed = "left";
          }
          if (this.dataJson.head[i] === "错误原因") {
            item.fixed = "right";
          }
          this.columnsw.push(item);
        }
      } else {
        this.$emit("onActionS", 2, true, this.dataJson.count);
      }
    },
    getTypeName(val) {
      const arr = [
        { k: "姓名", v: "name" },
        { k: "手机", v: "phone" },
        { k: "性别", v: "gender" },
        { k: "邮箱", v: "email" },
        { k: "微信", v: "wechat" },
        { k: "公司名称", v: "companyName" },
        { k: "公司地址", v: "companyAddress" },
        { k: "公司类型", v: "companyType" },
        { k: "公司规模", v: "companyPersonSize" }
      ];
      let n = null;
      if (val) {
        arr.some(e => {
          if (val.includes(e.k)) {
            n = e.v;
            return true;
          }
        });
      }
      return n;
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetTalentPoolImportInfo();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetTalentPoolImportInfo();
    },

    handleClose() {
      const token = this.$store.state.auth.token;
      axios({
        url: `/hr/api/v1/empSocInfos/exportErrorExcel`,
        method: "POST",
        responseType: "blob",
        data: this.dataJson,
        headers: {
          token: token
        }
      })
        .then(res => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", "参保数据错误数据表.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(err => {
          console.log("error log --> ", err);
        });
    },
    async onSubmit() {
      this.$emit("onActionS", 2, false, "");
      // this.uploadSpinning = true;
      // const formData = new FormData();
      // formData.append("recordId", this.dataJson.id);
      // formData.append("isPublic", this.$route.name === "seaImports");
      // axios({
      //   url: `/hr/api/v1/crmCustomerImportRecords/importCustomerInfo`,
      //   method: "post",
      //   data: formData,
      //   headers: {
      //     token: this.$store.state.auth.token
      //   }
      // })
      //   .then(res => {
      //     setTimeout(() => {
      //       this.uploadSpinning = false;
      //       if (res.data.code === 200) {
      //         this.$emit("onActionS", 2, true, res.data.data);
      //       } else {
      //         this.$emit("onActionS", 2, false, res.data.msg);
      //       }
      //     }, 500);
      //   })
      //   .catch(err => {
      //     console.log("error log --> ", err);
      //     setTimeout(() => (this.uploadSpinning = false), 500);
      //   });
    }
  }
};
</script>

<style lang="scss" scoped>
.preview-btn {
  text-align: center;
}
.tags {
  display: flex;
  div {
    padding: 0 8px;
    height: 22px;
    line-height: 22px;
    margin-right: 8px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }
}
.triangle {
  position: absolute;
  top: 0;
  left: 16px;
  width: 0;
  height: 0;
  // border-top: 20px solid transparent;
  border-left: 10px solid red;
  // border-right: 20px solid transparent;
  border-bottom: 10px solid transparent;
}
.pbox {
  margin: 24px;
  ::v-deep .ant-table-tbody > tr > td {
    position: relative !important;
  }
}
.overflows {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
